<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X2Knowledge - 知识提取器工具</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='images/logo/x2knowledge-icon.svg') }}" type="image/svg+xml">
    <!-- 引入Marked库用于Markdown渲染 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
    <!-- 引入highlight.js用于代码高亮 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/github.min.css') }}">
    <script src="{{ url_for('static', filename='js/dist/highlight.min.js') }}"></script>
    <style>
        .converter-options {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .converter-option {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        .converter-option input {
            margin-right: 8px;
        }
        .converter-description {
            margin-left: 25px;
            font-size: 0.9em;
            color: #666;
            margin-top: -3px;
            margin-bottom: 8px;
        }
        /* URL选择器样式 */
        .url-selector-group {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
        }
        .url-selector-input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            margin-top: 5px;
        }
        .url-selector-hint {
            font-size: 0.85em;
            color: #666;
            margin-top: 3px;
        }
        .selector-help-button {
            display: inline-block;
            margin-top: 8px;
            padding: 5px 10px;
            background-color: #f0f0f0;
            border-radius: 4px;
            font-size: 0.9em;
            color: #0066cc;
            cursor: pointer;
            transition: background-color 0.2s;
            text-align: center;
        }
        .selector-help-button:hover {
            background-color: #e0e0e0;
            text-decoration: underline;
        }
        /* 选择器教程模态框样式 */
        .selector-modal-content {
            max-width: 800px;
            width: 90%;
            max-height: 90%;
            overflow: hidden;
        }
        .selector-modal-body {
            padding: 0;
            overflow-y: auto;
            max-height: calc(90vh - 60px);
        }
        .selector-tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            background-color: #f5f5f5;
        }
        .selector-tab {
            padding: 10px 20px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 1em;
            color: #555;
            outline: none;
            transition: background-color 0.2s;
        }
        .selector-tab:hover {
            background-color: #e9e9e9;
        }
        .selector-tab.active {
            border-bottom: 2px solid #0066cc;
            color: #0066cc;
            font-weight: bold;
            background-color: #fff;
        }
        .selector-tab-content {
            display: none;
            padding: 20px;
        }
        .selector-tab-content.active {
            display: block;
        }
        .selector-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        .selector-table th, .selector-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }
        .selector-table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        .selector-table code {
            background-color: #f0f0f0;
            padding: 2px 5px;
            border-radius: 3px;
            font-family: monospace;
        }
        .selector-tips {
            margin-top: 20px;
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #0066cc;
        }
        .selector-tips h4 {
            margin-top: 0;
            color: #0066cc;
        }
        .selector-tips ol {
            padding-left: 20px;
        }
        .selector-tips li {
            margin-bottom: 8px;
        }
        /* Logo样式 */
        .logo-container {
            text-align: center;
            margin-bottom: 10px;
        }
        .header-logo {
            height: 80px;
            max-width: 100%;
        }
        .footer-logo {
            text-align: center;
            margin-bottom: 10px;
        }
        .footer-logo-img {
            height: 40px;
            width: 40px;
        }
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: white;
            border-radius: 5px;
            width: 90%;
            height: 90%;
            max-width: 1200px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        .modal-header h3 {
            margin: 0;
            color: #333;
        }
        .close-modal-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }
        .close-modal-btn:hover {
            color: #000;
        }
        .modal-body {
            flex-grow: 1;
            padding: 0;
            overflow: hidden;
            height: calc(100% - 60px);
        }
        #swagger-frame {
            width: 100%;
            height: 100%;
            border: none;
        }
        /* Embedding预处理相关样式 */
        .embedding-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        .embedding-input-form {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        .embedding-description {
            margin-bottom: 20px;
            color: #555;
        }
        .embedding-rules {
            background-color: #f0f8ff;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            border-left: 4px solid #4a90e2;
        }
        .embedding-rules h4 {
            margin-top: 0;
            color: #4a90e2;
        }
        .embedding-rules ol {
            padding-left: 20px;
            margin-bottom: 0;
        }
        .embedding-rules li {
            margin-bottom: 10px;
        }
        .embedding-example {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        .embedding-example h4 {
            margin-top: 0;
            color: #333;
        }
        .embedding-example-md, .embedding-example-json {
            margin-bottom: 15px;
        }
        .embedding-example-md h5, .embedding-example-json h5 {
            color: #555;
            margin-bottom: 5px;
        }
        .embedding-example-md pre, .embedding-example-json pre {
            background-color: #fff;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ddd;
            overflow: auto;
            max-height: 200px;
            font-size: 0.9em;
        }
        .embedding-input-methods {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }
        .embedding-method {
            flex: 1;
            min-width: 300px;
        }
        .embedding-method h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #333;
        }
        .embedding-textarea {
            width: 100%;
            min-height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            resize: vertical;
        }
        .embedding-options {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 6px;
        }
        .embedding-options h4 {
            margin-top: 0;
            color: #333;
        }
        .embedding-option {
            margin-bottom: 15px;
        }
        .embedding-select, .embedding-input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="language-switch">
            <button class="language-btn active" data-lang="zh">中文</button>
            <button class="language-btn" data-lang="en">English</button>
        </div>
        
        <header>
            <h1 data-i18n="title">X2Knowledge - 知识提取器工具</h1>
            <p data-i18n="subtitle">知识库原生支持：输出带元数据的Markdown，与RAG/LangChain/Agent等框架无缝对接</p>
            <div class="nav-links">
                <a href="#" class="nav-link" id="swagger-btn" data-i18n="swagger-link">API Swagger</a>
            </div>
        </header>

        <!-- Swagger API 模态框 -->
        <div id="swagger-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 data-i18n="swagger-title">API Test</h3>
                    <button id="close-swagger-modal" class="close-modal-btn">×</button>
                </div>
                <div class="modal-body">
                    <iframe id="swagger-frame" src="/swagger/" frameborder="0" width="100%" height="100%"></iframe>
                </div>
            </div>
        </div>

        <main>
            <div class="tab-controls">
                <button class="tab-button" data-tab="text" data-i18n="tab-text">转为文本</button>
                <button class="tab-button active" data-tab="markdown" data-i18n="tab-markdown">转为Markdown</button>
                <button class="tab-button" data-tab="url" data-i18n="tab-url">URL转Markdown</button>
                <button class="tab-button" data-tab="embedding" data-i18n="tab-embedding">Embedding预处理</button>
            </div>
            
            <div class="tab-content" id="tab-text">
                <div class="upload-container" id="dropAreaText">
                    <div class="upload-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="17 8 12 3 7 8"></polyline>
                            <line x1="12" y1="3" x2="12" y2="15"></line>
                        </svg>
                    </div>
                    <p><span data-i18n="drop-files">拖拽文件到此处或</span><label for="fileInputText" class="file-label" data-i18n="choose-file">选择文件</label></p>
                    <input type="file" id="fileInputText" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt,.md,.xml" hidden>
                    <p class="file-types" data-i18n="supported-types-text">支持的文件类型: .doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf, .txt, .md, .xml</p>
                    <p class="file-note" data-i18n="doc-note">注意: 处理旧版Word文档(.doc)可能需要更长时间，建议转换为.docx格式后上传</p>
                    <p class="ocr-note" data-i18n="ocr-feature">OCR功能: 自动识别文档中的图片文字</p>
                    <p class="encoding-note" data-i18n="encoding-feature">编码功能: 自动将文档转换为UTF-8编码，解决中文乱码问题</p>
                </div>
            </div>
            
            <div class="tab-content active" id="tab-markdown">
                <div class="upload-container" id="dropAreaMarkdown">
                    <div class="upload-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="17 8 12 3 7 8"></polyline>
                            <line x1="12" y1="3" x2="12" y2="15"></line>
                        </svg>
                    </div>
                    
                    <div class="converter-options">
                        <div class="converter-option">
                            <input type="radio" id="markitdown-converter" name="converter" value="markitdown" checked>
                            <label for="markitdown-converter" data-i18n="markitdown-converter-label">使用 MarkItDown 转换器 (默认)</label>
                        </div>
                        <p class="converter-description">
                            <span data-i18n="markitdown-converter-desc">对原生Office格式文件（DOCX, XLSX, PPTX）支持非常好，速度快、准确率高，但对PDF格式文件效果较差</span>
                            <br>
                            <span style="font-size: 0.85em;">支持的文件格式：PDF、DOCX、PPTX、XLSX、XLS、CSV、JSON、XML、WAV、MP3</span>
                        </p>
                        
                        <div class="converter-option">
                            <input type="radio" id="docling-converter" name="converter" value="docling">
                            <label for="docling-converter" data-i18n="docling-converter-label">使用 Docling 转换器</label>
                        </div>
                        <p class="converter-description">
                            <span data-i18n="docling-converter-desc">对PDF有优化的表格识别和VLM，准确率大大提升，支持更多输入格式，但需要CUDA环境最佳（当前使用CPU加速）</span>
                            <span data-i18n="docling-warning" style="color: red; font-weight: bold;">且时间较长，不建议在本测试环境使用！</span>
                            <br>
                            <span style="font-size: 0.85em;">支持的文件格式：PDF、DOCX、XLSX、PPTX、Markdown、AsciiDoc、HTML、XHTML、CSV、PNG、JPEG、TIFF、BMP</span>
                        </p>
                        
                        <div class="converter-option">
                            <input type="radio" id="docling-images-converter" name="converter" value="docling-images">
                            <label for="docling-images-converter" data-i18n="docling-images-converter-label">使用 Docling 转换器（带图片）</label>
                        </div>
                        <p class="converter-description">
                            <span data-i18n="docling-images-converter-desc">目前仅支持PDF、DOCX识别图文</span>
                            <span data-i18n="docling-images-warning" style="color: orange; font-weight: bold;">将识别的图片存储在/static/images/目录下，请及时清理</span>
                            <br>
                            <span style="font-size: 0.85em;">支持的文件格式：PDF、DOCX</span>
                        </p>
                    </div>
                    
                    <p><span data-i18n="drop-files">拖拽文件到此处或</span><label for="fileInputMarkdown" class="file-label" data-i18n="choose-file">选择文件</label></p>
                    <input type="file" id="fileInputMarkdown" accept=".pdf,.docx,.xlsx,.pptx,.md,.html,.xhtml,.csv,.png,.jpg,.jpeg,.tiff,.bmp,.json,.xml,.wav,.mp3,.xls" hidden>
                
                    <p class="file-note" data-i18n="markdown-note-structure">注意: 转换为Markdown格式可以更好地保留文档结构</p>
                    <p class="markdown-note" data-i18n="markdown-feature-structure">Markdown功能: 保留文档标题、列表、表格等结构</p>
                </div>
            </div>

            <div class="tab-content" id="tab-url">
                <div class="url-input-container">
                    <div class="url-input-form">
                        <div class="url-input-group">
                            <label for="urlInput" data-i18n="url-input-label">输入网页URL：</label>
                            <input type="url" id="urlInput" class="url-input" placeholder="https://example.com" required>
                        </div>
                        <div class="url-options">
                            <label class="url-option">
                                <input type="checkbox" id="removeHeaderFooter" checked>
                                <span data-i18n="remove-header-footer">移除页眉和页脚</span>
                            </label>
                            <div class="url-selector-group">
                                <label for="urlSelector" data-i18n="selector-label">CSS选择器（可选）：</label>
                                <input type="text" id="urlSelector" class="url-selector-input" placeholder="#content, .article, main">
                                <span class="url-selector-hint" data-i18n="selector-hint">输入CSS选择器来提取特定内容</span>
                                <div class="selector-help-button" id="selectorHelpBtn" data-i18n="selector-help-button">查看选择器教程</div>
                            </div>
                        </div>
                        <button id="convertUrlBtn" class="btn" data-i18n="convert-url">转换URL</button>
                    </div>
                    <div class="url-description">
                        <p data-i18n="url-convert-description">将网页内容转换为结构化的Markdown格式，保留原始内容的结构、链接和图片。</p>
                        <p data-i18n="url-convert-tip">提示：移除页眉页脚选项可以帮助您获取更干净的主要内容。</p>
                        <p data-i18n="selector-tip">选择器提示：使用CSS选择器（如 #content, .article, main）可以精确提取页面中的特定内容。</p>
                    </div>
                </div>
            </div>

            <div class="tab-content" id="tab-embedding">
                <div class="embedding-container">
                    <div class="embedding-input-form">
                        <h3 data-i18n="embedding-title">Markdown知识库入库预处理</h3>
                        <div class="embedding-description">
                            <p data-i18n="embedding-description">将Markdown文件或文本处理为JSON和CSV格式的问答对，用于知识库入库前的数据准备。</p>
                        </div>
                        
                        <div class="embedding-rules">
                            <h4 data-i18n="embedding-rules-title">处理规则说明：</h4>
                            <ol>
                                <li data-i18n="embedding-rule-1">将标题(#)收集为question，标题下的所有文本内容收集为answer，直到下一个标题的出现</li>
                                <li data-i18n="embedding-rule-2">如果是二级及以上标题，问题标题会拼接上级标题，格式为"{上级标题},{当前标题}"</li>
                                <li data-i18n="embedding-rule-3">只有包含内容的标题会被处理，空标题会被忽略</li>
                            </ol>
                        </div>
                        
                        <div class="embedding-example">
                            <h4 data-i18n="embedding-example-title">示例：</h4>
                            <div class="embedding-example-md">
                                <h5 data-i18n="embedding-example-md-title">原始Markdown：</h5>
<pre>
# 一、项目介绍
X2Knowledge 是一个高效的开源知识提取器工具

## 1.项目架构图
![设计示意图](data:image/png;base64...)

## 2.功能特点
* **多种转换引擎**
  + **MarkItDown**：针对Office文档优化，速度快、效率高
</pre>
                            </div>
                            <div class="embedding-example-json">
                                <h5 data-i18n="embedding-example-json-title">生成的JSON：</h5>
<pre>
[
  {
    "question": "一、项目介绍",
    "answer": "X2Knowledge 是一个高效的开源知识提取器工具"
  },
  {
    "question": "一、项目介绍,1.项目架构图",
    "answer": "![设计示意图](data:image/png;base64...)"
  },
  {
    "question": "一、项目介绍,2.功能特点",
    "answer": "* **多种转换引擎**\n  + **MarkItDown**：针对Office文档优化，速度快、效率高"
  }
]
</pre>
                            </div>
                        </div>
                        <div class="embedding-rules">
                            <h4 data-i18n="method-rules-title">方法使用说明：</h4>
                            <ol>
                                <li data-i18n="method-rule-1">POST请求： /preprocess-for-storage 具体参数见swagger页面的调用方法</li>
                                <li data-i18n="method-rule-2">该方法仅适用于Markdown文件，其他格式文件请使用其他方法</li>
                                <li data-i18n="method-rule-3" style="color: red;">同时文件中至少包含一个标题，否则内容为空</li>
                            </ol>
                        </div>
                        
                    </div>
                </div>
            </div>

            <div class="result-container" id="resultContainer" style="display: none;">
                <div class="result-header">
                    <h2 data-i18n="conversion-result">转换结果</h2>
                    <div class="result-actions">
                        <button id="copyBtn" class="btn" data-i18n="copy-text">复制文本</button>
                        <button id="downloadBtn" class="btn" data-i18n="download-text">下载文件</button>
                        <button id="newConvertBtn" class="btn" data-i18n="new-conversion">新的转换</button>
                        <button id="fullscreenBtn" class="btn fullscreen-btn" style="display: none;"><i class="fullscreen-icon"></i><span data-i18n="fullscreen">全屏预览</span></button>
                    </div>
                </div>
                <div class="result-content">
                    <pre id="resultText"></pre>
                </div>
            </div>

            <div class="loading" id="loadingIndicator" style="display: none;">
                <div class="spinner"></div>
                <p data-i18n="converting">正在转换文件，请稍候...</p>
                <p class="loading-note" data-i18n="doc-loading-note">旧版格式文件(.doc)可能需要较长时间</p>
                <p class="ocr-loading-note" data-i18n="ocr-loading-note">正在进行图片文字识别...</p>
            </div>
        </main>

        <footer>
            <p data-i18n="footer">© 2025 X2Knowledge v0.6.0 - 知识提取器工具 | by leonda</p>
            <div class="github-links">
                <a href="https://github.com/leonda123/X2Knowledge.git" class="github-link" target="_blank">
                    <svg class="github-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
                    </svg>
                    GitHub
                </a>
                <a href="https://gitee.com/leonda/X2Knowledge.git" class="github-link" target="_blank">
                    <svg class="github-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                        <path d="M8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0.24 3.088a4.912 4.912 0 0 1 4.794 5.542H5.726c-.02 1.311 1.425 1.993 2.761 1.993 1.155 0 2.206-.606 2.657-1.44h2.342a5.083 5.083 0 0 1-5.038 3.392 4.919 4.919 0 0 1-4.82-5.585 4.916 4.916 0 0 1 4.612-3.902z"/>
                    </svg>
                    Gitee
                </a>
            </div>
        </footer>
    </div>

    <!-- 全屏预览覆盖层 -->
    <div id="fullscreenOverlay" class="fullscreen-overlay">
        <div class="fullscreen-header">
            <h3 data-i18n="fullscreen-preview">预览内容</h3>
            <button id="closeFullscreenBtn" class="close-fullscreen-btn">×</button>
        </div>
        <div class="fullscreen-content">
            <div id="fullscreenPreview" class="markdown-preview fullscreen-preview"></div>
        </div>
    </div>

    <!-- CSS选择器教程模态框 -->
    <div id="selectorHelpModal" class="modal">
        <div class="modal-content selector-modal-content">
            <div class="modal-header">
                <h3 data-i18n="selector-help-title">CSS选择器使用教程</h3>
                <button id="closeSelectorHelpBtn" class="close-modal-btn">×</button>
            </div>
            <div class="modal-body selector-modal-body">
                <div class="selector-tabs">
                    <button class="selector-tab active" data-tab="basic" data-i18n="selector-tab-basic">基础选择器</button>
                    <button class="selector-tab" data-tab="advanced" data-i18n="selector-tab-advanced">高级选择器</button>
                    <button class="selector-tab" data-tab="examples" data-i18n="selector-tab-examples">常用示例</button>
                </div>
                <div class="selector-tab-content active" id="basic-selectors">
                    <h4 data-i18n="basic-selectors-title">基础CSS选择器</h4>
                    <table class="selector-table">
                        <thead>
                            <tr>
                                <th data-i18n="selector-syntax">语法</th>
                                <th data-i18n="selector-example">示例</th>
                                <th data-i18n="selector-description">描述</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>#id</code></td>
                                <td><code>#content</code></td>
                                <td data-i18n="selector-id-desc">选择ID为"content"的元素</td>
                            </tr>
                            <tr>
                                <td><code>.class</code></td>
                                <td><code>.article</code></td>
                                <td data-i18n="selector-class-desc">选择所有class为"article"的元素</td>
                            </tr>
                            <tr>
                                <td><code>tag</code></td>
                                <td><code>main</code></td>
                                <td data-i18n="selector-tag-desc">选择所有&lt;main&gt;标签元素</td>
                            </tr>
                            <tr>
                                <td><code>tag.class</code></td>
                                <td><code>div.content</code></td>
                                <td data-i18n="selector-tag-class-desc">选择所有class为"content"的div元素</td>
                            </tr>
                            <tr>
                                <td><code>*</code></td>
                                <td><code>*</code></td>
                                <td data-i18n="selector-all-desc">选择所有元素（不推荐使用）</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="selector-tab-content" id="advanced-selectors">
                    <h4 data-i18n="advanced-selectors-title">高级CSS选择器</h4>
                    <table class="selector-table">
                        <thead>
                            <tr>
                                <th data-i18n="selector-syntax">语法</th>
                                <th data-i18n="selector-example">示例</th>
                                <th data-i18n="selector-description">描述</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>parent > child</code></td>
                                <td><code>article > p</code></td>
                                <td data-i18n="selector-child-desc">选择所有父元素为&lt;article&gt;的&lt;p&gt;元素</td>
                            </tr>
                            <tr>
                                <td><code>ancestor descendant</code></td>
                                <td><code>article p</code></td>
                                <td data-i18n="selector-descendant-desc">选择所有位于&lt;article&gt;内的&lt;p&gt;元素</td>
                            </tr>
                            <tr>
                                <td><code>[attribute]</code></td>
                                <td><code>[role="main"]</code></td>
                                <td data-i18n="selector-attribute-desc">选择所有具有role="main"属性的元素</td>
                            </tr>
                            <tr>
                                <td><code>:first-child</code></td>
                                <td><code>li:first-child</code></td>
                                <td data-i18n="selector-first-child-desc">选择每个父元素的第一个&lt;li&gt;子元素</td>
                            </tr>
                            <tr>
                                <td><code>selector1, selector2</code></td>
                                <td><code>main, .content, #article</code></td>
                                <td data-i18n="selector-multiple-desc">同时选择多个元素，用逗号分隔</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="selector-tab-content" id="examples-selectors">
                    <h4 data-i18n="common-examples-title">常用网站内容提取示例</h4>
                    <table class="selector-table">
                        <thead>
                            <tr>
                                <th data-i18n="website-type">网站类型</th>
                                <th data-i18n="selector-to-try">推荐选择器</th>
                                <th data-i18n="selector-purpose">提取内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td data-i18n="blog-articles">博客文章</td>
                                <td><code>article, .post, .entry-content, #content</code></td>
                                <td data-i18n="blog-articles-desc">提取文章正文，跳过评论和侧边栏</td>
                            </tr>
                            <tr>
                                <td data-i18n="news-sites">新闻网站</td>
                                <td><code>.article-body, .story-body, [itemprop="articleBody"]</code></td>
                                <td data-i18n="news-sites-desc">提取新闻正文，跳过相关新闻和广告</td>
                            </tr>
                            <tr>
                                <td data-i18n="documentation">技术文档</td>
                                <td><code>main, .main-content, .documentation, .markdown-body</code></td>
                                <td data-i18n="documentation-desc">提取文档内容，跳过导航菜单</td>
                            </tr>
                            <tr>
                                <td data-i18n="forum-posts">论坛帖子</td>
                                <td><code>.thread-content, .post-message, .message-body</code></td>
                                <td data-i18n="forum-posts-desc">提取帖子内容，跳过回复和侧边栏</td>
                            </tr>
                            <tr>
                                <td data-i18n="product-pages">产品页面</td>
                                <td><code>.product-description, #product-details, [itemprop="description"]</code></td>
                                <td data-i18n="product-pages-desc">提取产品描述，跳过推荐产品</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="selector-tips">
                        <h4 data-i18n="finding-selectors-title">如何找到正确的选择器</h4>
                        <ol>
                            <li data-i18n="finding-selectors-tip1">在网页上右击要提取的内容区域，选择"检查元素"</li>
                            <li data-i18n="finding-selectors-tip2">在开发者工具中查看HTML结构，找到包含所需内容的主要元素</li>
                            <li data-i18n="finding-selectors-tip3">查看该元素的ID或class属性，使用#id或.class作为选择器</li>
                            <li data-i18n="finding-selectors-tip4">如果尝试一个选择器没效果，可以组合多个选择器（用逗号分隔）增加匹配概率</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/i18n.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script>
        // 预定义变量
        let activeTab = 'text'; // 默认激活的标签
        let currentURL = '';
        let originalMarkdown = '';
        let md = window.markdownit({
            html: true, 
            linkify: true, 
            typographer: true,
            breaks: true
        });
        
        // Embedding预处理元素
        let embeddingTextarea, outputFormat, outputFilename, processEmbeddingBtn;
    
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // ... existing code ...
            
            // 初始化Embedding预处理元素
            embeddingTextarea = document.getElementById('embeddingTextarea');
            outputFormat = document.getElementById('outputFormat');
            outputFilename = document.getElementById('outputFilename');
            processEmbeddingBtn = document.getElementById('processEmbeddingBtn');
    
            // ... existing code ...
        });
        
        // 配置marked选项
        marked.setOptions({
            breaks: true,             // 将换行符转换为<br>
            gfm: true,                // 启用GitHub风格的Markdown
            headerIds: true,          // 为标题添加id
            mangle: false,            // 不转义HTML
            tables: true,             // 启用表格支持
            sanitize: false,          // 允许HTML标签
            smartLists: true,         // 使用更智能的列表行为
            smartypants: true,        // 使用更智能的标点符号
            xhtml: false,             // 不使用xhtml闭合标签
            highlight: function(code, lang) {
                // 如果语言被指定且highlight.js支持，使用高亮
                if (lang && hljs.getLanguage(lang)) {
                    try {
                        return hljs.highlight(code, {language: lang}).value;
                    } catch (err) {}
                }
                
                // 使用自动检测语言
                try {
                    return hljs.highlightAuto(code).value;
                } catch (err) {}
                
                // 如果高亮失败，返回原始代码
                return code;
            }
        });
        
        // 创建自定义渲染器，增强表格和图片渲染
        const renderer = new marked.Renderer();
        
        // 自定义表格渲染
        renderer.table = function(header, body) {
            return '<table class="md-table">\n'
                + '<thead>\n'
                + header
                + '</thead>\n'
                + '<tbody>\n'
                + body
                + '</tbody>\n'
                + '</table>\n';
        };
        
        // 自定义图片渲染
        renderer.image = function(href, title, text) {
            return `<img src="${href}" alt="${text}" title="${title || text}" class="md-image">`;
        };
        
        // 应用自定义渲染器
        marked.use({ renderer });
        
        // 全屏预览相关
        document.addEventListener('DOMContentLoaded', function() {
            const fullscreenBtn = document.getElementById('fullscreenBtn');
            const fullscreenOverlay = document.getElementById('fullscreenOverlay');
            const closeFullscreenBtn = document.getElementById('closeFullscreenBtn');
            const fullscreenPreview = document.getElementById('fullscreenPreview');
            const markdownPreview = document.querySelector('.markdown-preview');
            
            // 显示全屏预览
            fullscreenBtn.addEventListener('click', function() {
                // 复制预览内容到全屏预览区域
                fullscreenPreview.innerHTML = markdownPreview.innerHTML;
                
                // 显示全屏覆盖层
                fullscreenOverlay.style.display = 'flex';
                document.body.style.overflow = 'hidden'; // 防止背景滚动
                
                // 为全屏预览中的图片添加点击事件
                const images = fullscreenPreview.querySelectorAll('img.md-image');
                images.forEach(img => {
                    img.addEventListener('click', function() {
                        this.classList.toggle('md-image-fullscreen');
                    });
                });
            });
            
            // 关闭全屏预览
            closeFullscreenBtn.addEventListener('click', function() {
                fullscreenOverlay.style.display = 'none';
                document.body.style.overflow = 'auto'; // 恢复背景滚动
            });
            
            // ESC键关闭全屏预览
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && fullscreenOverlay.style.display === 'flex') {
                    fullscreenOverlay.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            });
        });

        // 模态框相关
        document.addEventListener('DOMContentLoaded', function() {
            // Swagger模态框
            const swaggerBtn = document.getElementById('swagger-btn');
            const swaggerModal = document.getElementById('swagger-modal');
            const closeSwaggerBtn = document.getElementById('close-swagger-modal');
            
            // 打开Swagger模态框
            swaggerBtn.addEventListener('click', function(e) {
                e.preventDefault();
                swaggerModal.style.display = 'flex';
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            });
            
            // 关闭Swagger模态框
            closeSwaggerBtn.addEventListener('click', function() {
                swaggerModal.style.display = 'none';
                document.body.style.overflow = 'auto'; // 恢复背景滚动
            });
            
            // 点击模态框背景关闭模态框
            swaggerModal.addEventListener('click', function(e) {
                if (e.target === swaggerModal) {
                    swaggerModal.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            });
        });
    </script>
</body>
</html> 